<template>
  <view style="padding: 0 40rpx;">
    <view class="flex j-content row">
         <view class="label">申请日期</view> 
        <view class="ipt" style="text-align: right;">
            <picker mode="date" class="pick flex a-item fd" :value="form.busDate" @change="bindbusDateChange">
            <view class="uni-input" style="color: #333;">{{ form.busDate?form.busDate:'请选择业务日期' }}</view>
            </picker>
        </view>
      </view>
      <view class="flex j-content row">
        <view class="red">*</view> 
         <view class="label">请假开始时间</view> 
        <view class="ipt" style="text-align: right;">
            <!-- <picker mode="date" class="pick flex a-item fd" :value="form.startDate" @change="bindStartDateChange">
            <view class="uni-input" style="color: #000;">{{ form.startDate?form.startDate:'请选择开始日期' }}</view>
            </picker> -->
            <leeDatetime @change="startDateChange" placeholder="请选择日期时间" :value="form.beginTime"/>
        </view>
      </view>
      <view class="flex j-content row">
        <view class="red">*</view> 
        <view class="label">请假结束时间</view> 
        <view class="ipt" style="text-align: right;">
            <!-- <picker mode="date" class="pick flex a-item  fd" :value="form.endDate" @change="bindEndDateChange">
            <view class="uni-input" style="color: #000;">{{ form.endDate?form.endDate:'请选择结束日期' }}</view>
            </picker> -->
            <!-- 使用方式 -->
            <leeDatetime @change="bindLeeDateTimeChange" placeholder="请选择日期时间" :value="form.endTime"/>
        </view>
      </view>
      <view class="flex j-content row">
         <view class="label flex"><view class="red">*</view>请假类型</view> 
		 <picker mode="selector" style="flex-grow: 1;text-align: right;" :range="typeList" @change="changedeptId" range-key="name">
		   <view class="picker"> {{ type?type:"请选择请假类型" }}</view>
		 </picker>
        <!-- <view class="ipt">
            <w-select width="100%"  border="none" fontSize="17px" marginright="40rpx" textagin="right"  :showClose="false" @change="changedeptId" :defaultValue="form.type || '请选择请假类型'" valueName="name" :list="typeList"/>
         </view> -->
      </view>
      <view style="margin: 20px 0;">
        <view>请假原因</view> 
        <view class="ipt">
            <textarea  class="texta" type="text" v-model="form.reason"></textarea>
        </view>
      </view>
      <view  style="margin: 20px 0;">
        <view>备注</view> 
        <view class="ipt">
            <textarea  class="texta" type="text" v-model="form.remark"></textarea>
        </view>
      </view>


      <button @click="handleSubmit" class="btn">提交</button>
  </view>
</template>

<script>
import leeDatetime  from "@/components/lee-datetime";
import { getChildSysDeptList,getSysUserList} from "@/service/api/logistics";
import { addOrSave} from "@/service/api/askForLeave";
export default {
    components: {
        leeDatetime,
    },
    created() {
        getChildSysDeptList().catch(err=>{
            this.deptList = err.content
            })
            getSysUserList().catch(err=>{
            this.userList = err.content
            })
    },
    data() {
        return {
            form:{},
            deptList:[],
            userList:[],
            typeList:[
                {id:1,name:'事假'},
                {id:2,name:'公出'},
                {id:3,name:'年假'},
                {id:4,name:'病假'},
                {id:5,name:'调休假'},
                {id:6,name:'婚假'},
                {id:7,name:'产假'},
                {id:8,name:'陪产假'},
                {id:9,name:'其他'},
            ],
			type:''
        }
    },
    methods: {
        changedeptId(e){
			const index = e.target.value*1
			this.type=this.typeList[index].name
            this.form.type=index+1
        },
        bindbusDateChange: function(e) {
            this.$set(this.form,'busDate',e.detail.value)
        },
        handleSubmit(){
            addOrSave(this.form).then(res=>{
                uni.showToast({icon: 'success',title:res.msg});
                uni.navigateBack({
                                    delta: 1,
                                })
            }).catch(err=>{
                uni.showModal({title:'提示',content:err.msg});
            })
        },
            bindLeeDateTimeChange(e) {
            this.$set(this.form,'endTime',e.value)
            },
            startDateChange(e) {
                this.$set(this.form,'beginTime',e.value)
            },
    },
}
</script>

<style lang="scss" scoped>
.row{
    line-height: 120rpx;
	border-bottom: rgba(200, 200, 200, 0.5) 1px solid;
    .label{
        margin: auto;
    }
    .ipt{
        flex-grow: 1;
        margin: auto;
    }
    .fd{
        flex-direction: row-reverse;
    }
    .right{
        text-align: right;
        margin-right: 40rpx;
    }
    
}
.btn{
        width: 100%;
        border-radius: 40rpx;
        padding: 10rpx 0;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #007aff;
    }
	.texta{
		height: 150rpx;
		border:1px solid rgba(200, 200, 200, 0.5);
		margin-top: 10rpx;
		width: 100%;
	}
</style>